<template>
  <div>
    <el-alert type="success" :title="Title" center show-icon></el-alert>
    <div class="top">
      <div class="numberText">
        <el-row :gutter="16" class="row1">
          <el-col :span="12" v-for="(item, index) in topCard" :key="index">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content">
                <i class="grid-con-icon" :class="[item.icon, item.bg]"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ topCardValue[item.value] }}</div>
                  <div>{{ item.lable }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="rl">
        <el-calendar>
          <template slot="dateCell" slot-scope="{ date, data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split("-").slice(2).join("-") }}
              <!-- {{ data.isSelected ? "✔️" : "" }} -->
            </p>
          </template>
        </el-calendar>
      </div>
    </div>
    <div class="bottom">
      <div class="el-icon-s-flag" style="width:97%;background-color:#346cb0;height:1.6rem;color:white;line-height:1.6rem;padding-left:15px"> 公告公知</div>
      
    <vue-seamless-scroll 
        :data="tableData" 
        :class-option="classOption" 
        class="scroll-content">
        <ul>
            <li  v-for="(item,index) in tableData"
                :key="index" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;margin-bottom:5px">
                {{item.topic}}——{{item.content}}
            </li>
        </ul>
    </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import webservice from "../../utils/webservice";
export default {
  data() {
    return {
      tableData: [],
      Title: "欢迎使用后台管理系统(V1.0)",
      topCard: [
        {
          icon: "el-icon-user-solid",
          bg: "bg-36cfca",
          lable: "用户总数量",
          value: "userTotalNumber",
        },
        {
          icon: "el-icon-truck",
          bg: "bg-fd4d4f",
          lable: "可用车位总数量",
          value: "ableParkTotalNumber",
        },
        {
          icon: "el-icon-notebook-1",
          bg: "bg-ffc53d",
          lable: "已用车位总数量",
          value: "disableParkTotalNumber",
        },
        {
          icon: "el-icon-notebook-2",
          bg: "bg-42a7ff",
          lable: "注册车辆总数量",
          value: "carTotalNumber",
        },
      ],
      topCardValue: {},
      tableData: [
        ],
       classOption:{
                    singleHeight: 50,
                    waitTime: 0,
                    step: 0.5,
                    hoverStop: true
                }
    };
  },
  mounted() {
    this.getData()
    this.getInfo()
    console.log(this.$router);
    console.log(this.router);
  },
  methods: {
    getData(){
      webservice.HttpPost(
        "/api/common/indexStatistics",
        '',
        (data) => {
          if (data.code === 200) {
            this.topCardValue = data.data;
          }
        }
      );
    },
    //获取信息
    getInfo() {
      webservice.HttpPost("/api/note/findNoteListInfo", '', (data) => {
        if (data.code === 200) {
          this.tableData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style>
.scroll-content {
        height: 100px;
        overflow: hidden;
    }
.top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 15px 15px 5px 15px;
}
.numberText {
  width: 60%;
  height: 360px;
}
.rl {
  width: 28%;
  margin-right: 70px;
  /* height: 440px;
    border: 4px solid rgb(60, 153, 240);
    border-radius: 4px; */
}
.el-calendar-table .el-calendar-day {
  height: 1.8rem;
}
.el-calendar__body {
  padding: 0px;
}
.el-calendar__header {
  background-color: #346cb0;
}
.el-calendar__title {
  color: white;
}
.el-card{
  margin-bottom: 30px;
}
.is-selected {
  color: #1989fa;
}
.el-divider--horizontal {
  margin: 10px 0;
}

.bg-36cfca {
  background: #36cfca;
}

.bg-fd4d4f {
  background: #fd4d4f;
}

.bg-ffc53d {
  background: #ffc53d;
}

.bg-42a7ff {
  background: #42a7ff;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 8.5rem;
}
.grid-con-icon {
  font-size: 4rem;
  color: #fff;
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  color: #595959;
}
.grid-num {
    font-size: 2.5rem;
  }
.grid-con-icon {
  width: 8.5rem;
  height: 8.5rem;
  text-align: center;
  line-height: 8.5rem;
}
.row1 {
  margin: 10px 0;
}
.bottom{
  margin-left: 15px;
  /* border: 1px solid #42a7ff; */
}
</style>
